再來要介紹的是，GEO+Gmap+waypoints的JS測試。

這部份的功能，雖然已完成，但是，離實用性、可靠性、完整性來說，都還有一小段差距，目前已知的問題有...

1.前端介面還不夠漂亮!
2.使用者可以選擇中途停留點，但中途停留點沒有照使用者「目前的位置」做距離上的排序。
3.使用者透過此功能，規劃好行程之後，無法存檔。

根據上述的三個問題，在此系列文章中的最後階段，會再次提出，完整的說明及改善。

document.addEventListener("deviceready", onDeviceReady, false);
var r_start; //開始的位置
var r_end;  //結束的位置
var getlat; 
var getlon;
var myCenter;
var map;
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
function getError(error) {
    alert('code: ' + error.code + '\n' +
          'message: ' + error.message + '\n');
}
function onDeviceReady() {
       //如果選擇「目前的位置」則進入getCenter，如果選擇另一個，則直接帶入經緯度
    $("#show_tree").on("click", function initMap() {
        if ($('input[name=r_start]:checked').val() == 1) {
            getCenter();  
        } else {
            myCenter = new google.maps.LatLng(22.7969679, 121.121909);
            getmap(myCenter);
        }
    });
}
function getmap(myCenter) {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: myCenter
    });
    directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay, myCenter);
}
function getCenter() {
    var getoptions = { enableHighAccuracy: true, timeout: 30000 };
    navigator.geolocation.getCurrentPosition(getSuccess, getError, getoptions);
  
}
var getSuccess = function (getposition) {
    getlat = getposition.coords.latitude;
    getlon = getposition.coords.longitude;
    //alert(getlat + "," + getlon);
  //  myCenter = {
    //    lat: getposition.coords.latitude,
   //     lng: getposition.coords.longitude
  //  };
  //  map.setCenter(myCenter);
    myCenter = new google.maps.LatLng(getlat, getlon);
    getmap(myCenter);
 //   alert(myCenter);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, myCenter) {
    var waypts = [];
    var checkboxArray = document.getElementById('waypoints');
    for (var i = 0; i < checkboxArray.length; i++) {
        if (checkboxArray.options[i].selected) {
            waypts.push({
                location: checkboxArray[i].value,
                stopover: true
            });
        }
    }
//從這邊開始進入，「起點」「終點」和「中途停留點」的路程計算
    directionsService.route({
        origin: myCenter,
        destination: document.getElementById('end').value,
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    }, function (response, status) {
        //      alert(myCenter);
        //        alert(document.getElementById('start').value);
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById('directions-panel');
            summaryPanel.innerHTML = '';
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
                var routeSegment = i + 1;
                summaryPanel.innerHTML += '<b>路線介紹: ' + routeSegment +
                    '</b><br>';
                summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
                summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
                summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
            }
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}
function locError(error) {
    // the current position could not be located
}
function locSuccess(position) {
    // initialize map with current position and calculate the route
    initRoute(position.coords.latitude, position.coords.longitude);
}

(待)

2016/12/15 Sunallen